<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box">
111
    </div>
</body>

<script>

var isTap = true;
       function bindTapEvent(dom, callback){
           var startTime = 0;
           var isMove = false;

           dom.addEventListener('touchstart', function(){
                startTime = Date.now();
           })

           dom.addEventListener('touchmove', function(){
                isMove = true;
           })

           dom.addEventListener('touchend', function(e){
                var time = Date.now() - startTime;
                if( time < 150 && !isMove ){
                    callback && callback.call(this, e)
                }

                // 初始化状态
                startTime = 0;
                isMove = false;
           })
       }

      function tap(){
        if(isTap){
          console.log('tap事2件')
        }

      }
      bindTapEvent( document.querySelector('.box'), tap)

      setTimeout(function(){isTap = false},1000)
      

</script>

</html>